<template>
    <div>
<!--        {{subject_id}}{{subject_name}}{{currentItem}}-->
        <!--        {{recentVideoList}}-->
        <div v-if="recentVideoList.rows && recentVideoList.rows.length">
            <div style="display: flex;padding: 10px 0px" v-for="item in recentVideoList.rows">
                <img width="160" :src="item.bannerPicWeb ? item.bannerPicWeb:item.bannerPic" alt="">
                <div style="display: flex;justify-content: space-between;width: 100%;border-bottom: 1px solid gray;margin-left:20px;">
                    <div class="press-centermodel">
                        <p style="font-weight: bold">{{item.title}}</p>
                        <p style="font-size: 12px;color: rgb(141, 130, 130);">发布时间：{{proxy.$filters.dateTimeFormat2(item.releaseTime)}}</p>
                        <p style="font-size: 14px;color: rgb(141, 130, 130);">访问数量：{{item.basisNum}}</p>
                    </div>
                    <div style="display: flex;flex-direction:column;justify-content: flex-end">
                        <el-button style="text-align: right;margin-bottom: 20px" type="primary" @click="continueStudy(item)">阅读详情</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <el-empty description="暂无数据" />
        </div>
        <div v-if="recentVideoList.pagination">
            <el-pagination
                    background
                    v-model:currentPage="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="recentVideoList.pagination.count"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs,watchEffect,getCurrentInstance} from 'vue'
    import {useRouter} from "vue-router";
    import {basicInformation} from "@/api/api";

    export default {
        name: "pressCenter",
        props: {
            subject_id: {
                type: String
            },
            subject_name: {
                type: String
            },
            currentItem:{
                type:String
            }
        },
        setup(props) {
            let router = useRouter();
            const { proxy } = getCurrentInstance()
            let data = reactive({
                recentVideoList: [],
                pageSize: 20,
                currentPage: 1,
            })

            let getRecentVideoList = () => {
                basicInformation({type:'新闻中心',courseID: localStorage.getItem('activeCourse'),page:data.currentPage,pageSize:data.pageSize}).then(res => {
                    console.log('最近在学视频列表', res)
                    data.recentVideoList = res.data;
                })
            }
            getRecentVideoList()

            const handleSizeChange = (val) => {
                console.log(`${val} items per page`)
                data.pageSize = val;
                getRecentVideoList();
            }
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`)
                data.currentPage = val;
                getRecentVideoList();
            }

            let continueStudy = (item) =>{
                console.log(item)
                router.push({name:'InfoMationMessage',params:{n_id:item.id,activeName:props.currentItem}})
            }

            watchEffect(() =>{
                let activeCourse = props.subject_id;
                console.log('activeCourse',activeCourse);
                getRecentVideoList();
            })
            return {
                proxy,
                handleSizeChange,
                handleCurrentChange,
                ...toRefs(data),
                continueStudy
            }
        }
    }
</script>

<style scoped>
.press-centermodel p{
  line-height: 25px;
}
</style>
